//useRoutes 的原理， 就是把对象以树的形式进行存放，同时根据URL 来匹配渲染对应的组件
const useRoutes = (routes)=>{
  const location = useLocation()
  // 匹配路由
  const matchRoute = (route)=>{
    return pathToRegexp(route.path, keys).exec(location.pathname)
  }
}

const createRoutesFromChildren = children => {
  const routes = []
  React.Children.forEach(children, child => {
    if (!React.isValidElement(child)) return
    if (child.type === ReactRouterDOM.Route) {
      // 如果是 Route 组件，则直接添加到 routes 中
      routes.push(child.props)
    }
})
}
const Routes = ()=> useRoutes(createRoutesFromChildren(children))